<template>
	<view style="padding-bottom: 10px;box-sizing: border-box;">
		<view class="goods-item" v-for="(item, index) in goodsList" :key="index">
			<view class="flex align-center">
				<view
					style="width: 40rpx;height: 40rpx;text-align: center;line-height: 40rpx;background-color: #D8D8D8;color: #fff;border-radius: 40rpx;font-size: 30rpx;margin-right: 10rpx;">
					{{ index + 1 }}
				</view>
				<view v-if="showImage">
					<image class="goods-image" :src="item.goodsPicUrl" v-if="!!item.goodsPicUrl" @tap="previewImage"
						lazy-load mode="scaleToFill" :data-index="index"></image>
					<image v-else class="goods-image" src="../../../static/img/110.png"></image>
				</view>
			</view>
			<view style="margin-left: 22rpx;width: 100%;">
				<view class="goods-name">{{ item.goodsName }}</view>
				<view class="goods-info">
					<view style="font-size: 32rpx;">
						<view>{{ item.goodsCode }}</view>
						<view> {{ item.goodsBarcode }} </view>
						<view v-if="item.isFreshGoods == '1'">
							<view v-if="type != 'order'">
								已退{{ parseInt(String((item.refundNum * item.refundWeight * 1000))) }}g</view>
						</view>
					</view>
					<view class="flex" style="flex:1;justify-content: space-between;margin-left: 50rpx;">
						<view class="goods-quantity" :style="{ 'color': item.goodsNum > 1 ? '#E43E00' : '#000000' }"
							v-if="type == 'order'">X<text> {{ item.goodsNum }}</text></view>
						<view class="goods-quantity" :style="{ 'color': item.goodsNum > 1 ? '#E43E00' : '#000000' }"
							v-else>
							X<text> {{ item.refundNum }}</text></view>
						<view style="display: flex;justify-content: space-between;margin-left: 5rpx;"
							v-if="type == 'order'">
							<view class="goods-price" v-if="item.chnlType == 'jddj'">
								{{ formatPrice(item.goodsPrice * item.goodsNum) }}
							</view>
							<view class="goods-price" v-else>
								{{ formatPrice(item.storePrice * item.goodsNum) }}
							</view>
						</view>
						<view style="display: flex;justify-content: space-between;margin-left: 5rpx;" v-else>
							<view class="goods-price" v-if="item.chnlType == 'jddj'">¥
								{{ formatPrice(item.goodsPrice * item.refundNum) }}
							</view>
							<view class="goods-price" v-else>{{ formatPrice(item.originRefundAmount) }}</view>
						</view>
					</view>
				</view>

			</view>
		</view>
	</view>
</template>

<script>
import { formatPrice } from '../../../hooks/bcmUseUntils';
export default {
	props: {
		type: {
			type: String,
			default: 'order'
		},
		goodsList: {
			type: Array,
			default: () => []
		},
		showImage: {
			type: Boolean,
			default: true
		}
	},

	methods: {
		formatPrice,
		previewImage(e) {
			const index = e.currentTarget.dataset.index;
			uni.previewImage({
				urls: [this.goodsList[index].goodsPicUrl],
				current: 0,
				complete: () => {
					uni.setStorageSync('ispreviewImage', true)
					// console.log(uni.getStorageSync('ispreviewImage'), 'prevprevprevprev')
				}
			});
		}
	}
};
</script>

<style lang="scss" scoped>
@import "../common/common.css";

.goods-item {
	display: flex;
	align-items: center;
	padding: 8rpx 8rpx 10rpx 8rpx;
	border-bottom: 1rpx solid #e1e1e1;
}

.goods-image {
	width: 100rpx;
	height: 100rpx;
	margin-right: 5rpx;
	// border: 1px solid #eee;
	border-radius: 4rpx;
}

.goods-info {
	display: flex;
	align-items: center;
	flex: 1;
}

.goods-name {
	margin-bottom: 2px;
	font-size: 32rpx;
	line-height: 35rpx;
}

.goods-price {
	font-size: 32rpx;
	text-align: right;
}

.goods-quantity {
	font-size: 42rpx;
	font-weight: bold;
	text-align: left;
}
</style>